<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>随机文字</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <style type="text/css">
        #randomText{width: 500px; height: 100px; border: 1px solid #C8D6BA; position: relative;}
        #randomText span{position: absolute; padding: 5px 0; }
        #randomText img{ position: absolute; width: 100px;height: 88px;}
    </style>

</head>
<body>

<div id="randomText">
    <span>这啊</span>
    <span>人呢</span>
    <span>果然很高兴</span>
    <img src="http://i10.topit.me/m166/1016600941b33e69ae.jpg" alt="">
    <span>怎么办</span>
    <span>发生发生了什么事了什么事</span>
    <span>拼命</span>
</div>
<form action="">
    <input type="text" id="adtext">
    <button id="adbtn">添加</button>
</form>
<script type="text/javascript">
var rand=(function(){
    var RandomText=function(){
        this.ran=document.getElementById('randomText');
        this.text=this.ran.getElementsByTagName('span');
        this.img=this.ran.getElementsByTagName('img')[0];
        this.minText=12;
        this.maxText=30;
        this.textWidth=185;
        this.boxWidth=500;
        this.lh=0;
        this.rh=0;

    };
    RandomText.prototype={
        constructor:randomText,
        init:function(){
             for(var i=0,iLen=this.text.length;i<iLen;i++){
                this._posText(this.text[i],i);
            }

        },
        _posText:function(otext,i){
            var lastlHeight=this.lh,lastrHeight=this.rh,textw=0;
            otext.style.fontSize=this._randomRang(this.minText,this.maxText)+'px';
            textw=otext.clientWidth<this.textWidth?otext.clientWidth:this.textWidth;
            otext.style.width=textw+'px';

            if(i%2==0){

                otext.style.left=this._randomRang(0,this.textWidth-textw)+'px';
                otext.style.top=lastlHeight+'px';
                otext.style.color='rgb('+this._randomRang(0,255)+','+this._randomRang(0,255)+','+this._randomRang(0,255)+')';
                lastlHeight+=otext.clientHeight;
            }else{

                otext.style.right=this._randomRang(0,this.textWidth-textw)+'px';
                otext.style.top=lastrHeight+'px';
                otext.style.color='rgb('+this._randomRang(0,255)+','+this._randomRang(0,255)+','+this._randomRang(0,255)+')';
                lastrHeight+=otext.clientHeight;
            }
            this.ran.style.height=Math.max(lastlHeight,lastrHeight)+'px';
            this.img.style.left=this.boxWidth/2-this.img.width/2+'px';
            this.img.style.top=Math.max(lastlHeight,lastrHeight)/2-this.img.height/2+'px';
            this.lh=lastlHeight;
            this.rh=lastrHeight;
        },
        add:function(text){
          var span=document.createElement('span');
              span.innerHTML=text;
              this.ran.appendChild(span);
              this._posText(span,this.text.length);
        },
        _randomRang:function(start,end){
            return Math.ceil(Math.random()*(end-start)+start);
        }


    }
    var rand=new RandomText();

        return rand;

})();
var ajax=(function(){
        var xhr=null;
        try{xhr= new XMLHttpRequest();}catch(e){
            try{ xhr= new ActiveXObject('Msxml2.XMLHTTP'); }catch(e){
                try{ xhr= new ActiveXObject('Microsoft.XMLHTTP');}catch(e){
                }
            }
        }
        var seral=function(obj){
            var s='';
            if(typeof obj=='object'){
                for(var key in obj){
                    s+=key+'='+obj[key]+'&'
                }
            }
            return s;
        };
    return {
        get:function(url,arg,fn){
            url+=seral(arg);
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4 && xhr.status==200){
                    fn(xhr.responseText);
                }
            };
            xhr.open('get',url,true);
            xhr.send(null);
            
        },
        post:function(url,arg,fn){

            xhr.onreadystatechange=function(){
                if (xhr.readyState==4 && xhr.status==200){
                    fn(xhr.responseText);
                }
            };
            xhr.open('post',url,true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(seral(arg));
        }

    }


})();
rand.init();
document.getElementById('adbtn').onclick=function(){
    var atext=document.getElementById('adtext');
        if(!atext.value) return;
        rand.add(atext.value);
        ajax.post('a.php',{abc:'asdf'},function(data){
            
        });
        atext.value='';
}
</script>
</body>
</html>